<template>
	<view class="container">
		<nav-header title="LOGO&标题" custom-nav :showRight="false">
		</nav-header>
		<view>
			<view class="logo">
				<view class="title">
					LOGO
				</view>
				<view class="icon-plus">

					<image-upload :onSuccess="onUnloadImageSuccess">
						<image v-if="formData.logo != null" class="logo-image" :src="formData.logo"></image>
						<up-icon v-else name="plus" size="50"></up-icon>

					</image-upload>
				</view>
			</view>
			<view class="item">
				<view class="title">
					企业简称:
				</view>
				<view class="input-style">
					<uni-easyinput v-model="formData.companyAbbreviation" placeholder="请输入内容"
						@input="input"></uni-easyinput>
					<view class="input-text">查看效果</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					对外展示:
				</view>
				<view class="input-style">
					<uni-easyinput v-model="formData.companyDisplayName" placeholder="请输入内容"
						@input="input"></uni-easyinput>
					<view class="input-text">查看效果</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					企业全称:
				</view>
				<view class="input-style">
					<uni-easyinput disabled v-model="formData.companyName" placeholder="请输入内容"
						@input="input"></uni-easyinput>
				</view>
			</view>
		</view>

		<button class="custom-button" @tap="confirmSave">确认修改</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import {
		onShow,
		onHide,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useRoute
	} from 'vue-router';

	// 获取组件实例来使用全局方法
	const {
		proxy
	} = getCurrentInstance()

	// 定义表单数据
	const formData = reactive({
		logo: '', // 添加 logo 属性
		companyAbbreviation: '', // 企业简称
		companyDisplayName: '', // 对外展示
		companyName: '' // 企业全称
	});

	// 输入框输入事件处理
	const input = (event) => {
		console.log('Input value:', event);
	};

	const getData = (companyId) => {
		console.log("companyId", companyId)
		proxy.$http({
			url: `/company/getCompanyInfo?companyId=${companyId}`,
			method: 'GET'
		}).then((res) => {
			if (res.companyDisplayName == null) {

				res.companyDisplayName = res.companyName.replace('有限公司', '');
			}
			if (res.companyAbbreviation == null) {
				const parts = res.companyDisplayName.split(/市/);
				if (parts.length > 1) {
					res.companyAbbreviation = parts[1].trim();
					res.companyAbbreviation = res.companyAbbreviation.replace('有限公司', '');
				} else {
					// 处理没有 "市" 的情况
					res.companyAbbreviation = res.companyName.trim();
				}
			}
			Object.assign(formData, res)
		})
	}
	const confirmSave = () => {
		console.log("formData", formData)
		proxy.$http({
			url: `/company/updateCompanyLogo`,
			data: formData,
			method: 'POST'
		}).then((res) => {
			uni.showToast({
				title: '修改信息成功',
				icon: 'success',
				duration: 1000 // 设置显示时长为 3000 毫秒
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1000); // 3000 毫秒即 3 秒后执行返回上一页操作
		})
	}
	// 图片上传	
	const onUnloadImageSuccess = (file, res) => {
		formData.logo = res.data.originUrl
	}
	// 使用 onShow 生命周期钩子
	onLoad((options) => {
		const companyId = options.companyId
		getData(companyId)
	});
	// const companyId = ref(null);

	// onMounted(() => {
	// 	// 在这里获取传递的参数
	// 	const route = useRoute(); 
	// 	companyId.value = route.query.companyId

	// 	if (companyId.value) {
	// 		getData(companyId.value);
	// 	}
	// });
</script>

<style lang="scss" scoped>
	.container {
		margin: 24rpx;
	}

	.logo {
		display: flex;
		align-items: center;
		height: 200rpx;
		gap: 20rpx;

		.title {
			width: 160rpx;
		}
	}

	.icon-plus {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 10rpx;
		border: 1px solid #ccc;
		/* 添加边框 */
		box-sizing: border-box;
		/* 确保边框不会影响元素的尺寸 */
	}

	.logo-image {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		gap: 20rpx;
		height: 110rpx;

		.title {
			width: 160rpx;
		}
	}

	.input-style {
		width: 79.5%;
	}

	.input-text {
		font-size: 25rpx;
		color: #7F7F7F;
	}

	.custom-button {
		margin-top: 20rpx;
		background-color: $brand-500;
		/* 修改背景色为蓝色 */
		color: $white;
		/* 文字颜色为白色 */
		border: none;
		/* 去掉边框 */
		border-radius: 60rpx;
		/* 圆角 */
		padding: 10px 20px;
		/* 内边距 */
		font-size: 16px;
		/* 字体大小 */
		line-height: 50rpx;
	}

	.custom-button:hover {
		background-color: #4169E1;
		/* 鼠标悬停时背景色变深 */
	}
</style>